<template>
    <div class="box">
        <div class="myHeader">
            <div class="myHeaderBox">
                <div class="myHeaderText">
                    后台管理
                </div>
            </div>
            <div class="set" @click="exit">
                退出
            </div>
        </div>

        <div class="left">
            <el-col :span="12">
                <el-menu
                        default-active="1"
                        class="el-menu-vertical-demo nav"
                        background-color="#1b292f"
                        text-color="#909399"
                        active-text-color="skyblue"
                >
                    <el-menu-item index="1" @click="change('seat')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">座位管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="change('classification')">
                        <i class="el-icon-menu"></i>
                        <span slot="title">菜品分类</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="change('food')">
                        <i class="el-icon-dish"></i>
                        <span slot="title">菜品管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="change('info')">
                        <i class="el-icon-shopping-cart-full"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="change('message')">
                        <i class="el-icon-chat-dot-square"></i>
                        <span slot="title">留言</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="change('statistics')">
                        <i class="el-icon-s-marketing"></i>
                        <span slot="title">统计</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </div>
        <div class="right">
            <transition mode="out-in">
                <component :is="isComponent"></component>
            </transition>
        </div>
    </div>

</template>

<script>
    import classification from "./classification";
    import food from "./food";
    import info from "./info";
    import message from "./message";
    import seat from "./seat";
    import statistics from "./statistics";
    export default {
        name: "overviews",
        components:{
            classification,
            food,
            info,
            message,
            seat,
            statistics
        },
        data(){
            return {
                isComponent:'seat',
            }
        },
        methods:{
            //切换组件
            change(data) {
                this.isComponent = data
            },
            //退出
            exit(){
                sessionStorage.removeItem('adminid')
                this.$router.push({
                    path:'/index'
                })
            }
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .myHeader {
        z-index: 2;
        width: 100%;
        height: 50px;
        position: fixed;
        top: 0;
        background-color: rgba(0,0,0,0.4);
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .myHeaderBox{
        display: flex;
        align-items: center;
        margin-left: 50px;
    }
    .myHeaderText {
        font-size: 20px;
        font-weight: bolder;
        margin-left: 20px;
    }
    .set {
        margin-right: 50px;
        cursor: pointer;
    }
    .left {
        width: 250px;
        height: 100vh;
        /*background-color: skyblue;*/
    }
    /deep/.nav{
        width: 250px;
        height: 100vh;
        padding-top: 70px;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
    }
    /deep/.el-menu-item {
        margin-left: 20px;
        border-radius: 50px 0 0 50px;
        padding-left: 50px !important;
    }
    /deep/.el-menu-item:hover {
        background-color: rgba(78,190,220,0.4) !important;
        border-radius: 50px 0 0 50px;
    }
    /deep/.el-menu-item:focus {
        background-color: rgba(78,190,220,0.2) !important;
        border-radius: 50px 0 0 50px;
    }
    .right {
        width: calc(100% - 250px);
        height: 100vh;
        padding: 80px 50px 50px 20px;

        box-sizing: border-box;


    }
</style>
